<template>
    <div class="message-system">
        <div class="list" v-for="item in dataList">
            <div class="list-date">{{item.date}}</div>
            <div class="list-content">
                <div class="title"><span>{{item.title}}</span></div>
                <div class="text">{{item.content}}</div>
                <div class="details-btn app-right-icon">查看详细</div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    @import '../../../style/variable';
    .message-system{
        background-color: #F8F8F8;
        overflow:hidden;
        .list {
            text-align: center;
            padding: 0 1.3rem;
            margin-top: 1.5rem;
            &-date {
                background: #DCDCDC;
                color: #333E48;
                font-size: 1.2rem;
                display: inline-block;
                padding: 0.2rem 0.6rem;
                border-radius: 0.4rem;
            }
            &-content {
                background: #fff;
                border-radius: 0.4rem;
                text-align: left;
                margin-top: 1.1rem;
                .title {
                    border-bottom: 1px solid #F2F2F2;
                    color: #333E48;
                    font-size: 1.3rem;
                    line-height: 1.9rem;
                    font-weight: 550;
                    padding: 1rem 1.5rem;
                }

                .text {
                    border-bottom: 1px solid #F2F2F2;
                    padding: 1rem 1.5rem;
                }
                .details-btn {
                    color: #178FF2;
                    padding: 1rem 1.5rem;
                }
            }
        }
    }
</style>

<script>
    export default {
        data(){
            const dataList = Array(6).fill({
                title: '公司信息审核通知',
                content: '尊敬的测试熊,您好!您注册的信息已成功提交,我们会在一个小时之内完成审核注册工作。（非上班时间审核工作可能会稍晚）请留意，谢谢！',
                date: '2018.06.22 17:23',
            });

            return {
                dataList
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>